<template>
  <div id="app">
    <img src="src/assets/logo.png" alt />
    <div>
      实时获取屏幕
      宽:{{width}};
      高:{{height}}
    </div>
    <div>{{computedCount}}</div>
    <h3>{{variableValue}}</h3>
    <about btnName="click me" @changeMsg="changeMsgFn"></about>
    <button @click="recovery">恢复</button>
  </div>
</template>

<script>
// vue3.0更接近 "渐进式"。按需引入需要的函数
import { defineComponent, ref, reactive, onMounted, computed } from "vue";
import about from "./view/About.vue";
// 引用公共方法
import windowSize from "./utils/window-size";
export default defineComponent({
  // 注册组件
  components: {
    about
  },
  // vue2.0 => vue3.0
  // Data => setup()
  // Method => const fnName = ()=>{}
  // Hooks => 生命周期:{页面加载函数：onMounted, 页面卸载函数：onUnmounted}
  // Computed => 计算属性
  // props => 传值
  // Emit => 子组件调用父组件方法
  // components =>注册组件
  setup() {
    // 相当于vue2.0中的 mounted 函数
    onMounted(() => {
      console.log("页面加载触发");
    });

    // 普通的值 String Boolean Number采用ref进行响应式
    const variableValue = ref("我是父页面的值");

    // 如果对象或者数组进行响应式，采用reactive,reactive里面不需要.value;直接.属性名
    const arrOrObject = reactive({ count: 0 });

    // 计算属性
    const computedCount = computed(() => {
      return (arrOrObject.count = "计算属性:" + 10000 * 10000);
    });

    // 点击子组件触发父组件方法更改父组件的值
    const changeMsgFn = res => {
      // 接收到子组件传过来的值
      variableValue.value = res;
    };

    // 普通方法声明方式
    const recovery = () => {
      window.history.go(0);
    };

    // 引用公共方法
    const { width, height } = windowSize();

    // setup 中返回的东西可以直接在模板中使用
    return {
      variableValue,
      arrOrObject,
      changeMsgFn,
      computedCount,
      recovery,
      width,
      height
    };
  }
});
</script>

<style>
#app {
  text-align: center;
}
</style>